<template>
	<view class="lyrics flex-vbox">
		<view class="flex-box flex-valign volume-bar">
			<i :class="'music-icon music-icon-volume' + (volume == 0 ? '-off' : '')" @click="toggleVolume"/>
			<slider :value="volume*100" class="flex-item" block-size="10" activeColor="#9fa6a0" @change="onSlideComplete"/>
		</view>
		<view class="flex-item" @click="eventHandler('changePanel')">
			<scroll-view scroll-y class="lyric-list" :style="{height: scrollHeight + 'px'}" :scroll-into-view="'lyric' + curIndex" scroll-with-animation>
				<view class="lyric" :class="{active: curIndex == index}" v-for="(lyric, index) in lyrics" :key="index" :id="'lyric' + index">
					{{lyric.content}}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		props: {
			bottomHeight: {// 传入一个底部工具栏的高度，以便计算scroll-view高度
				type: Number,
				default: 0
			}
		},
		computed: {
			lyrics() {
				return this.$store.state.music.lyrics;
			},
			curIndex() {
				return this.lyricIndex();
			},
			volume() {
				return this.$store.state.volume;
			}
		},
		data() {
			return {
				scrollHeight: this.ScreenHeight - this.bottomHeight - this.CustomBar - this.StatusBar - 23
			}
		},
		methods: {
			...mapGetters([
				'lyricIndex'
			]),
			eventHandler(key) {
				this.$emit(key);
			},
			toggleVolume() {
				if(this.volume == 0){
					this.MusicPlayer.changeVolume(0.5);
				}
				else{
					this.MusicPlayer.changeVolume(0);
				}
			},
			onSlideComplete(e) {
				let value = e.detail.value;
				this.MusicPlayer.changeVolume(value/100);
			}
		},
		mounted() {
			
		}
	}
</script>

<style scoped lang="scss">
	.lyrics{
		height: 100%;
		position: relative;
	}
	.volume-bar{
		position: absolute;
		top: 0;
		left: 5%;
		right: 5%;
		.music-icon{
			font-size: 24rpx;
		}
	}
	.lyric-list{
		padding-top: 36rpx;
	}
	.lyric{
		font-size: 24rpx;
		min-height: 40rpx;
		text-align: center;
		padding: 16rpx;
		color: #CCCCCC;
	}
	.lyric.active{
		color: #FFFFFF;
		font-weight: bold;
	}
</style>
